<template>
  <div class="box wb100 hb100">
    <el-card class="mc loginBox" style="">
      <div class="f24">密码登录</div>
      <el-form
        ref="ruleFormRef"
        style="max-width: 600px"
        :model="ruleForm"
        :rules="rules"
        label-width="auto"
        class="mt20"
        status-icon
      >
        <el-form-item label="账号" prop="username" class="mt30">
          <el-input
            v-model="ruleForm.username"
            placeholder="请输入账号和手机号码"
          />
        </el-form-item>
        <el-form-item label="密码" prop="password" class="mt30">
          <el-input
            type="password"
            v-model="ruleForm.password"
            placeholder="请输入密码"
          />
        </el-form-item>
      </el-form>
      <el-button
        class="wb100 mt20"
        type="primary"
        @click="submitForm(ruleFormRef)"
        >登录</el-button
      >
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
import { useShopInfoStore } from "@/store/modules/shopInfo";
import http from "@/apis/http";
import Storage from '@/utils/Storage'
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
const shopStore = useShopInfoStore();
interface RuleForm {
  username: string;
  grant_type: string;
  password: string;
}
const localStorage = new Storage()
localStorage.removeItem('shopStore')
const ruleForm = reactive<RuleForm>({
  username: "",
  grant_type: "password",
  password: "",
});
const rules = reactive<FormRules<RuleForm>>({
  username: [{ required: true, message: "请输入账号密码", trigger: "blur" }],
});
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const { data } = await http.post(
        "gruul-mall-uaa/uaa/auth/oauth/token",
        ruleForm
      );
      const { value, refreshToken, additionalInformation } = data;
      console.log("submit!111", data);
      http.get("gruul-mall-shop/shop/info/base/" + additionalInformation.shopId)
        .then(({ data }: any) => {
          console.log("submit!", data);
          shopStore.SET_SHOP_INFO({
            id: data?.id,
            logo: data?.logo,
            name: data?.name,
            newTips: data?.newTips,
            status: data?.status,
            mode: data?.mode,
            userId: additionalInformation.userId,
            shopId: additionalInformation.shopId,
            shopType: data?.shopType,
          });
          shopStore.SET_SHOP_TOKEN({
            access_token: value,
            refresh_token: refreshToken.value,
          });
          console.log("shopStore", shopStore);
          router.replace({ path: "/" });
        });
    } else {
      console.log("error submit!", fields);
    }
  });
};

// const resetForm = (formEl: FormInstance | undefined) => {
//   if (!formEl) return;
//   formEl.resetFields();
// };
</script>
<style lang="scss" scoped>
.loginBox {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -140px;
  width: 480px;
}
</style>
